import { FC, memo, useEffect, useState } from "react";

interface IProps {
  indexText: string
  indexTextBgColor: string
  indexTextRound: string // 圆角
  title: string
  curNum: number // 当前数
  totalNum: number // 总数
  progressWrapBgColor: string // 进度条外部颜色
  progressBgColor: string // 进度条颜色
  color: string
}

const Progress: FC<Partial<IProps>> = memo((props) => {
  const {
    indexText = 'Top.1',
    indexTextBgColor = 'linear-gradient( 180deg, #4264E9 0%, rgba(73,107,235,0.34) 100%)',
    indexTextRound = '2px',
    title = '默认标题',
    curNum = 245477,
    totalNum = 445477,
    progressWrapBgColor = '#E3EBF9',
    progressBgColor = 'linear-gradient(90deg, #3666FF 0%, #6FB8FE 100%)',
    color = '#fff'
  } = props

  const [precent, setPrecent] = useState<string>('0%')

  useEffect(() => {
    setPrecent((Number(curNum) / Number(totalNum) * 100) + '%')
  }, [curNum, totalNum])

  return (
    <div className="w-full pl-31px pr-24px flex-1 min-h-60px">
    {/* <!-- 文字说明 --> */}
      <div className="flex justify-between items-center">
        <div className="flex flex-1 items-center">
          <div
            style={{ background: indexTextBgColor, borderRadius: indexTextRound, color: color }}
            className="w-56px h-28px flex-center"
          >
            { indexText }
          </div>
          <div className="ml-13px text-18px text-[#465E73]">{ title }</div>
        </div>
        <div className="text-18px text-[#666]">{ curNum }</div>
      </div>
    {/* <!-- 进度条box --> */}
      <div className="w-full h-6px mt-10px">
        <div
          style={{
            background: progressWrapBgColor
          }}
          className="w-full h-full"
        >
          <div
            style={{
              background: progressBgColor,
              width: precent
            }}
            className="progress h-full"
          ></div>
        </div>
      </div>
  </div>
  )
})

export default Progress